<template>
  <div class="flex-center">
    <region-selects
      v-model="region"
      @change="regionChange"
      v-show="showLabel == false"
    />
    <region-text v-show="showLabel == true" v-model="region" />
  </div>
</template>

<script>
import { RegionSelects, RegionText } from "v-region";
import { isNotNull } from "@/util/common-util";

export default {
  name: "app-address",
  components: {
    RegionSelects,
    RegionText,
  },
  props: {
    showLabel: {
      type: Boolean,
      default: false,
    },
    size: {
      type: String,
      default: "small",
    },
    initValue: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      region: {
        area: "",
        province: "",
        city: "",
        town: "",
      },
      label: "-",
    };
  },
  created() {
    console.log("Component mounted.");
    console.log(isNotNull(this.initValue));
    if (isNotNull(this.initValue)) {
      this.init(
        this.initValue.province,
        this.initValue.city,
        this.initValue.area
      );
    }
  },
  methods: {
    init(province, city, area) {
      this.region.province = province;
      this.region.city = city;
      this.region.area = area;
      console.log("-----this.region--------");
      console.log(this.region);
    },
    regionChange(region) {
      this.$emit("change", this.region);
      this.$emit("output", region);
      console.log(region, 4444);
    },
  },
};
</script>

<style scoped></style>
